<template>
  <n-modal class="dialog-wrapper" v-model:show="dialogVisible" preset="dialog" :show-icon="false"
           transform-origin="center" :block-scroll="true" :on-after-enter="loadPlan">
    <n-tabs type="segment" animated>
      <n-tab-pane name="chap1" tab="已完成">

        <div style="height: 400px; overflow:auto;">
          <n-steps vertical>
            <n-step status="finish" v-for="(item,index) in  plansCompletes.rows" :title="item.completeTime">
              目标：{{ item.title }}<br>
              <div v-if="item.remark"> 备注：{{ item.remark }}</div>
            </n-step>
          </n-steps>
        </div>


      </n-tab-pane>
      <n-tab-pane name="chap2" tab="开始了">
        <div style="height: 400px; overflow:auto;">
          <n-steps vertical>

            <n-step status="process" v-for="(item,index) in plansBegins.rows" :title="item.beginTime">
              目标：{{ item.title }}<br>
              <div v-if="item.remark"> 备注：{{ item.remark }}</div>
            </n-step>
          </n-steps>
        </div>
      </n-tab-pane>
      <n-tab-pane name="chap3" tab="计划中">
        <div style="height: 400px; overflow:auto;">
          <n-steps vertical>

            <n-step status="wait" v-for="(item,index) in plansCreates.rows" :title="item.createTime">
              目标：{{ item.title }}<br>
              <div v-if="item.remark"> 备注：{{ item.remark }}</div>
              <template #icon>

                <n-icon size="20">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path
                        d="M368.5 240H272v-96.5c0-8.8-7.2-16-16-16s-16 7.2-16 16V240h-96.5c-8.8 0-16 7.2-16 16 0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7H240v96.5c0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7 8.8 0 16-7.2 16-16V272h96.5c8.8 0 16-7.2 16-16s-7.2-16-16-16z"
                    />
                  </svg>
                </n-icon>
              </template>
            </n-step>
          </n-steps>
        </div>
      </n-tab-pane>
    </n-tabs>


  </n-modal>
</template>

<script setup lang="ts">
import useStore from "@/store";
import {listPlan} from "@/api/plan";

const {app} = useStore();
const dialogVisible = computed({
  get: () => app.planFlag,
  set: (value) => app.planFlag = value,
});

let plansCreates = [] as any
let plansBegins = [] as any
let plansCompletes = [] as any
listPlan({status: 121}).then(res => {
  plansCreates = res.data

})
const loadPlan = () => {
  listPlan({status: 121}).then(res => {
    plansCreates = res.data
  })
  listPlan({status: 122}).then(res => {
    plansBegins = res.data
  })
  listPlan({status: 123}).then(res => {
    plansCompletes = res.data
  })
}


</script>

<style scoped>
.title {
  color: var(--color-blue);
  font-size: 1.25rem;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  padding: 5px;
  height: 35px;
  width: 100%;
  border: 2px solid #8e8cd8;
  color: var(--text-color);
  border-radius: 2rem;
}

.search-input-wrapper #search {
  width: 100%;
  font-size: 1rem;
  margin-left: 5px;
  color: var(--text-color);
  outline: none;
}

@media (min-width: 960px) {
  .search-result-wrapper {
    padding: 0 3px;
    height: 390px;
    overflow: auto;
  }
}

@media (max-width: 959px) {
  .search-result-wrapper {
    height: calc(100vh - 190px);
    overflow: auto;
  }
}

.search-result {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}

.search-title {
  font-weight: 700;
  border-bottom: 1px solid #999;
  text-decoration: none;
}

.search-content {
  cursor: pointer;
  border-bottom: 1px dashed #ccc;
  padding: 5px 0;
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.divider {
  margin-top: 1.2rem;
  border: 2px dashed var(--color-pink-light-a7);
}
</style>
